<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/house.css" rel="stylesheet" />
	</head>

	<body>


		<div id="app">



			<header v-show="showAll" class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">国际购物中心</h1>
			</header>

			<header v-show="showMy" class="mui-bar mui-bar-nav">
				<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
				<h1 class="mui-title">形象分:{{userInfo.appearance}}</h1>
			</header>


			<div class="mui-content">

				<div class="mui-input-row mui-search" style="margin-top: 5px;margin-bottom: -10px;">
					<input type="search" class="mui-input-clear" 
						v-model="searchText" placeholder="">
				</div>

				<ul v-show="showAll" class="mui-table-view" style="margin-bottom: 100px;">
					<li @click="buyClothing(item.id)" v-for="item in clothingList"
						v-show="searchText==''||searchText!=''&&(searchText.indexOf(item.type)>-1||searchText.indexOf(item.brand)>-1)"
						class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img style="height: 100px;" class="mui-media-object mui-pull-left" :src="item.pic">
							<div class="mui-media-body">
								品牌:{{item.brand}}
								<br />
								<p>品类:{{item.type}}</p>
								<p style="color: red;">价格:{{item.price}}</p>
								<p>形象分:{{item.appearancePoint}}</p>
								<p>耐久度:{{item.expire | expireFilter}}</p>
							</div>
						</a>
					</li>
				</ul>

				<ul v-show="showMy" class="mui-table-view" style="margin-bottom: 100px;">
					<li v-for="(item,$index) in myClothingList" class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" :src="item.pic">
							<div class="mui-media-body">
								品牌:{{item.brand}}
								<br />
								<p style="color: red;">价格:{{item.price}}
									<span style="position: absolute;left: 55%;">
										<button type="button" :disabled="item.expire == 0" class="mui-btn mui-btn-red"
											style="padding: 5px 10px;font-size: 15px;"
											@click="sellClothing(item,$index)">出售</button>
										<button type="button" :disabled="item.expire == 0" class="mui-btn mui-btn-blue"
											style="padding: 5px 10px;font-size: 15px;"
											@click="paimaiClothing(item,$index)">拍卖</button>
										<button type="button" class="mui-btn mui-btn-green"
											style="padding: 5px 10px;font-size: 15px;"
											@click="giveClothing(item,$index)">捐赠</button>
									</span>
								</p>
								<p>形象分:{{item.appearancePoint}}</p>
								<p>耐久度:{{item.expire | expireFilter}}</p>
							</div>
						</a>
					</li>
				</ul>



			</div>

			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item2" @click="showClothingList()">
					<span class="mui-tab-label">服装列表({{clothingList.length}})</span>
				</a>
				<a class="mui-tab-item2" @click="showMyClothingList()">
					<span class="mui-tab-label">我的衣柜({{myClothingList.length}})</span>
				</a>
			</nav>


		</div>













		<script src="js/util.js"></script>
		<script src="js/db.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/vue-min.js"></script>
		<script type="text/javascript">
			mui.init()


			var app = new Vue({
				el: '#app',
				data: {
					searchText: '',
					userInfo: {
						niumaLevel: 1,
						name: '狗蛋',
						age: 0,
						IQ: 10,
						luck: 100,
						// money: 0,
						energyMax: 100,
						energyNow: 100,
						parentMoney: 100000,
						health: 100,
						hunger: 50,
						clean: 50,
						happy: 50,
						days: 1,
						healthLogs: [],
						bitCoinCount: 0,
						bitCoinTradeLog: [],
						bitCoinBuyAvg: 0,
						bitCoinProfit: 0,
						changeArr: [986.07, 29.67, 1899.80, 845.65, 301.77, 940.28, 213.06, 1824.48, 1913.19, 1000.02,
							1401.34, 1847.38,
							986.07, 29.67, 1899.80, 845.65, 301.77, 940.28, 63.72, 1877.40,
							1115.50, 657.85, 1279.25, 80.96, 1381.79, 907.53, 1459.61, 1200.13
						],
						todayWorkCount: 0,
						appearance: 0,
						clothingList: [],
						reputation: 0,
						houseList: [],
						baomuCareDay:0
					},
					clothingList: [{
						id: 1,
						type: '裤子',
						brand: '快鱼',
						price: 99,
						pic: 'pic/kuaiyu-kuzi-pic-1.jpg',
						expire: 30,
						appearancePoint: 10
					}, {
						id: 2,
						type: '上衣',
						brand: '快鱼',
						price: 49,
						pic: 'pic/kuaiyu-shangyi-pic-1.jpg',
						expire: 30,
						appearancePoint: 10
					}, {
						id: 3,
						type: '鞋子',
						brand: '快鱼',
						price: 79,
						pic: 'pic/kuaiyu-xiezi-pic-1.jpg',
						expire: 30,
						appearancePoint: 10
					}, {
						id: 4,
						type: '裤子',
						brand: '红豆',
						price: 599,
						pic: 'pic/hongdou-kuzi-pic-1.jpg',
						expire: 30,
						appearancePoint: 60
					}, {
						id: 5,
						type: '上衣',
						brand: '红豆',
						price: 499,
						pic: 'pic/hongdou-shangyi-pic-1.jpg',
						expire: 30,
						appearancePoint: 50
					}, {
						id: 6,
						type: '鞋子',
						brand: '红豆',
						price: 799,
						pic: 'pic/hongdou-xiezi-pic-1.jpg',
						expire: 30,
						appearancePoint: 70
					}, {
						id: 7,
						type: '裤子',
						brand: '香奈儿',
						price: 9999,
						pic: 'pic/xiangnaier-kuzi-pic-1.png',
						expire: 30,
						appearancePoint: 900
					}, {
						id: 8,
						type: '上衣',
						brand: '香奈儿',
						price: 8999,
						pic: 'pic/xiangnaier-shangyi-pic-1.jpg',
						expire: 30,
						appearancePoint: 800
					}, {
						id: 9,
						type: '鞋子',
						brand: '香奈儿',
						price: 12999,
						pic: 'pic/xiangnaier-xiezi-pic-1.jpg',
						expire: 30,
						appearancePoint: 1200
					}, {
						id: 10,
						type: '包包',
						brand: '小米',
						price: 79,
						pic: 'pic/xiaomi-baobao-pic-1.png',
						expire: -1,
						appearancePoint: 10
					}, {
						id: 11,
						type: '首饰',
						brand: '小米',
						price: 299,
						pic: 'pic/xiaomi-shouhuan-pic-1.png',
						expire: -1,
						appearancePoint: 10
					}, {
						id: 12,
						type: '包包',
						brand: '香奈儿',
						price: 79999,
						pic: 'pic/xiangnaier-baobao-pic-1.png',
						expire: -1,
						appearancePoint: 8000
					}, {
						id: 13,
						type: '手镯',
						brand: '卡地亚',
						price: 288888,
						pic: 'pic/kadiya-shouzhuo-pic-1.png',
						expire: -1,
						appearancePoint: 30000
					}, {
						id: 14,
						type: '手表',
						brand: '劳力士',
						price: 188888,
						pic: 'pic/laolishi-shoubiao-pic-1.png',
						expire: -1,
						appearancePoint: 20000
					}, {
						id: 15,
						type: '钻石',
						brand: '霍普钻石',
						price: 128888888,
						pic: 'pic/huopu-zuanshi-pic-1.png',
						expire: -1,
						appearancePoint: 12000000
					}, {
						id: 16,
						type: '钻石',
						brand: '中国黄金',
						price: 188888,
						pic: 'pic/huangjin-zuanshi-pic-1.jpg ',
						expire: -1,
						appearancePoint: 18888
					}, {
						id: 17,
						type: '钻石',
						brand: '钻石项链',
						price: 1888888,
						pic: 'pic/zuanshi-zuanshu-pic-1.jpg',
						expire: -1,
						appearancePoint: 188888
					}, {
						id: 18,
						type: '上衣',
						brand: '优衣库',
						price: 188,
						pic: 'pic/youyiku-shangyi-pic-30.jpg',
						expire: 30,
						appearancePoint: 18
					}, {
						id: 19,
						type: '钻石',
						brand: '中国黄金',
						price: 18888,
						pic: 'pic/huangjin-zuanshi-pic-2.jpg',
						expire: -1,
						appearancePoint: 1888
					}, {
						id: 20,
						type: '裤子',
						brand: '优衣裤',
						price: 88,
						pic: 'pic/yoyiku-shangyi-pic-1.jpg',
						expire: 40,
						appearancePoint: 8
					}, {
						id: 21,
						type: '鞋子',
						brand: '快鱼',
						price: 58,
						pic: 'pic/kuaiyu-xiezi-pic-2.jpg',
						expire: 10,
						appearancePoint: 5
					}, {
						id: 22,
						type: '鞋子',
						brand: 'LV',
						price: 88888,
						pic: 'pic/LV-xiezi-pic-1.jpg',
						expire: 80,
						appearancePoint: 8888
					}, {
						id: 23,
						type: '鞋子',
						brand: '古琦',
						price: 18888,
						pic: 'pic/guqi-xiezi-pic-1.jpg',
						expire: 80,
						appearancePoint: 1888
					}, {
						id: 24,
						type: '鞋子',
						brand: 'LV',
						price: 18888,
						pic: 'pic/LV-xiezi-pic-2.jpg',
						expire: 80,
						appearancePoint: 1888
					}, {
						id: 25,
						type: '鞋子',
						brand: 'LV',
						price: 88888,
						pic: 'pic/LV-xiezi-pic-3.jpg',
						expire: 80,
						appearancePoint: 8888
					}, {
						id: 26,
						type: '上衣',
						brand: '三清道士',
						price: 165,
						pic: 'pic/daoshifuzhuang-shangyi-pic-1.png',
						expire: 30,
						appearancePoint: 25
					}, {
						id: 27,
						type: '上衣',
						brand: 'GUUKA',
						price: 429,
						pic: 'pic/GUUKA-shangyi-pic-1.png',
						expire: 30,
						appearancePoint: 40
					}, {
						id: 28,
						type: '首饰',
						brand: '琳朝',
						price: 21000,
						pic: 'pic/linchao-shoushi-pic-1.png',
						expire: -1,
						appearancePoint: 2000
					}, {
						id: 29,
						type: '首饰',
						brand: '周六福',
						price: 20621,
						pic: 'pic/zhouliufu-shoushi-pic-1.png',
						expire: -1,
						appearancePoint: 2000
					}, {
						id: 30,
						type: '首饰',
						brand: '老庙',
						price: 2246,
						pic: 'pic/laomiao-shoushi-pic-1.png',
						expire: -1,
						appearancePoint: 200
					}, {
						id: 31,
						type: '上衣',
						brand: '牛仔外套',
						price: 139,
						pic: 'pic/niuzai-shangyi-pic-1.png',
						expire: 30,
						appearancePoint: 10
					}, {
						id: 32,
						type: '上衣',
						brand: 'Prada',
						price: 1688,
						pic: 'pic/prada-shangyi-pic-1.png',
						expire: 30,
						appearancePoint: 160
					}, {
						id: 33,
						type: '鞋子',
						brand: 'Prada',
						price: 11900,
						pic: 'pic/prada-xiezi-pic-1.png',
						expire: 30,
						appearancePoint: 1200
					}, {
						id: 34,
						type: '香水',
						brand: '祖玛珑',
						price: 9999,
						pic: 'pic/zumalong-xiangshui-pic-1.png',
						expire: -1,
						appearancePoint: 900
					}],
					showAll: true,
					showMy: false,
					myClothingList: [],
					reputation: 0
				},
				methods: {
					showClothingList() {
						this.showAll = true
						this.showMy = false
					},
					showMyClothingList() {
						this.showAll = false
						this.showMy = true
					},
					buyClothing(id) {


						let clothing = null

						for (var i = 0; i < this.clothingList.length; i++) {
							if (this.clothingList[i].id == id) {
								clothing = this.clothingList[i]
							}
						}

						if (clothing.price > this.userInfo.parentMoney) {
							mui.toast('余额不足 无法购买')
							return
						}

						let str = '<img style="width:100%" src="' + clothing.pic + '" />' + '</br>' + clothing.brand +
							clothing.type + '</br>' + '价格:' + clothing.price +
							'</br>' + '形象分:+' + clothing.appearancePoint
						let that = this
						mui.confirm(str, '商品信息', ['购买', '取消'], function(e) {
							if (e.index == 0) {
								let point = clothing.appearancePoint

								let oldMaxPoint = 0
								for (var i = 0; i < that.userInfo.clothingList.length; i++) {
									if (that.userInfo.clothingList[i].type == clothing.type && that.userInfo
										.clothingList[i].appearancePoint > oldMaxPoint) {
										oldMaxPoint = that.userInfo.clothingList[i].appearancePoint
									}
								}
								for (var i = 0; i < that.userInfo.clothingList.length; i++) {
									if (that.userInfo.clothingList[i].type == clothing.type && that.userInfo
										.clothingList[i].id == clothing.id) {
										point = 0
									}

								}
								if (point > oldMaxPoint) {
									that.userInfo.appearance -= oldMaxPoint
								} else {
									point = 0
								}

								that.myClothingList.push(clothing)
								that.userInfo.clothingList = that.myClothingList

								that.userInfo.appearance += point

								that.userInfo.parentMoney -= clothing.price
								Database.saveData('userInfo', JSON.stringify(that.userInfo))
								mui.toast('购买成功' + (point == 0 ? '' : ' 形象+' + clothing.appearancePoint))
							} else {

							}

						}, 'div')
					},
					sellClothing(item, index) {
						let str = '<img style="width:100%" src="' + item.pic + '" />' + '</br>' + item.brand + item
							.type + '</br>' + '出售价格:' + (item.price / 2).toFixed(2)

						let that = this
						mui.confirm(str, '交易信息', ['确认出售', '交易取消'], function(e) {
							if (e.index == 0) {


								let tempArr = that.myClothingList.filter(a => a.type == item.type)
								let tempSameIdArr = that.myClothingList.filter(a => a.id == item.id)
								tempArr.sort((a, b) => b.appearancePoint - a.appearancePoint)
								if (item.appearancePoint >= tempArr[0].appearancePoint && tempSameIdArr.length ==
									1) {
									that.userInfo.appearance -= item.appearancePoint
									that.userInfo.appearance += (tempArr[1] == null ? 0 : tempArr[1]
										.appearancePoint)
								} else if (item.appearancePoint >= tempArr[0].appearancePoint && tempSameIdArr
									.length >= 2) {

								} else {

								}

								that.myClothingList.splice(index, 1)
								// that.userInfo.appearance -= (temp == 1 ? item.appearancePoint : 0)
								that.userInfo.parentMoney += (item.price / 2)
								that.userInfo.clothingList = that.myClothingList
								Database.saveData('userInfo', JSON.stringify(that.userInfo))
								mui.toast('进账:' + (item.price / 2))



								if (that.myClothingList.length == 0) {
									that.showAll = true
									that.showMy = false
								}
							} else {

							}
						}, 'div')





					},
					paimaiClothing(item, index) {
						let str = '<img style="width:100%" src="' + item.pic + '" />' + '</br>' + item.brand + item
							.type + '</br>' + '预计成交价格:' + (item.price / 2).toFixed(2) + '~' + (item.price * 4 / 5)
							.toFixed(2)

						let that = this
						mui.confirm(str, '拍卖信息', ['确认拍卖', '交易取消'], function(e) {
							if (e.index == 0) {

								// let temp = 0
								// for (var i = 0; i < that.userInfo.clothingList.length; i++) {
								// 	if (that.userInfo.clothingList[i].id == item.id) {
								// 		temp += 1
								// 	}
								// }

								let tempArr = that.myClothingList.filter(a => a.type == item.type)
								let tempSameIdArr = that.myClothingList.filter(a => a.id == item.id)
								tempArr.sort((a, b) => b.appearancePoint - a.appearancePoint)
								if (item.appearancePoint >= tempArr[0].appearancePoint && tempSameIdArr.length ==
									1) {
									that.userInfo.appearance -= item.appearancePoint
									that.userInfo.appearance += (tempArr[1] == null ? 0 : tempArr[1]
										.appearancePoint)
								} else if (item.appearancePoint >= tempArr[0].appearancePoint && tempSameIdArr
									.length >= 2) {

								} else {

								}


								let finalPrice = getRandomInt((item.price / 2), (item.price * 4 / 5))

								that.myClothingList.splice(index, 1)
								// that.userInfo.appearance -= (temp == 1 ? item.appearancePoint : 0)
								that.userInfo.parentMoney += (finalPrice * 0.8)
								that.userInfo.clothingList = that.myClothingList
								Database.saveData('userInfo', JSON.stringify(that.userInfo))
								mui.alert('成交价:' + finalPrice + '</br>' + '20%佣金:' + (finalPrice * 0.2).toFixed(
										2) + '</br>' +
									'拍卖所得:' + (finalPrice * 0.8).toFixed(2), '交易成功')

								if (that.myClothingList.length == 0) {
									that.showAll = true
									that.showMy = false
								}
							} else {

							}
						}, 'div')


					},
					giveClothing(item, index) {
						// let temp = 0
						// for (var i = 0; i < this.userInfo.clothingList.length; i++) {
						// 	if (this.userInfo.clothingList[i].id == item.id) {
						// 		temp += 1
						// 	}
						// }
						let tempArr = this.myClothingList.filter(a => a.type == item.type)
						let tempSameIdArr = this.myClothingList.filter(a => a.id == item.id)
						tempArr.sort((a, b) => b.appearancePoint - a.appearancePoint)
						if (item.appearancePoint >= tempArr[0].appearancePoint && tempSameIdArr.length ==
							1) {
							this.userInfo.appearance -= item.appearancePoint
							this.userInfo.appearance += (tempArr[1] == null ? 0 : tempArr[1].appearancePoint)
						} else if (item.appearancePoint >= tempArr[0].appearancePoint && tempSameIdArr
							.length >= 2) {

						} else {

						}

						this.myClothingList.splice(index, 1)
						// this.userInfo.appearance -= (temp == 1 ? item.appearancePoint : 0)
						this.userInfo.reputation += parseFloat(item.price / 1000)

						if (this.myClothingList.length == 0) {
							this.showAll = true
							this.showMy = false
						}
						Database.saveData('userInfo', JSON.stringify(this.userInfo))
						mui.toast('好人一生平安 声誉+' + parseFloat(item.price / 1000))
					}
				},
				filters: {
					expireFilter(val) {
						return val == -1 ? '永久' : val
					}
				},
				mounted() {
					let userInfo = JSON.parse(Database.getData('userInfo'))
					if (userInfo == null) {
						document.location.href = 'birth.html'
					} else {
						this.userInfo = userInfo
						this.myClothingList = this.userInfo.clothingList
					}
				}
			})
		</script>
	</body>

</html>